﻿@page "/forms/floating"
<Pager Title="Floating labels" Description="Create beautifully simple form labels that float over your input fields."
Indicates="@(new[]{"Example","Textareas","Selects"})">
	<Demo Title="Example">
		<Description>
			Your have to set <code>DisplayName</code> or add <code>DisplayAttribute</code> for your bingding property 
			when using <code>FormInput</code> components,and <code>placeholder</code> is required for <code>&lt;input></code>
			component.
		</Description>
		<Run>
			<FormFloating>
				<FormInputText @bind-Value="UserName" placeholder="Enter your name"/>
			</FormFloating>
			<br />
			<FormFloating>
				<FormInputText @bind-Value="Password" DisplayName="Password" placeholder="Enter your password"/>
			</FormFloating>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormFloating>
	<FormInputText bind-Value=""UserName""/>
</FormFloating>
<FormFloating>
	<FormInputText bind-Value=""Password"" DisplayName=""Password""/>
</FormFloating>
```
```cs
[System.ComponentModel.DataAnnotations.Display(Name =""The name of user"")]
public string UserName { get; set; }
public string Password { get; set; }
```
			")
		</Code>
	</Demo>
		<Demo Title="">
		<Description>
			When there’s a value already defined, labels will automatically adjust to their floated position.
		</Description>
		<Run>
			<FormFloating>
				<FormInputText @bind-Value="Email" DisplayName="Email address" placeholder="Enter email address"/>
			</FormFloating>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormFloating>
	<FormInputText bind-Value=""Email"" DisplayName=""Email address"" placeholder=""Enter email address""/>
</FormFloating>
```
```cs
public string Email { get; set; } = ""email@example.com"";
```
			")
		</Code>
	</Demo>
	<Demo Title="Textareas">
		<Description>

		</Description>
		<Run>
			<FormFloating>
				<FormInputTextArea @bind-Value="Comments" DisplayName="Comments" placeholder="Enter some words"/>
			</FormFloating>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormFloating>
	<FormInputTextArea bind-Value=""Comments"" DisplayName=""Comments"" placeholder=""Enter some words""/>
</FormFloating>
```
			")
		</Code>
	</Demo>
	<Demo Title="Selects">
		<Description>
			Parameters with <code>Mulitple</code> and <code>MultipleSize</code> are not supported.
		</Description>
		<Run>
			<FormFloating>
				<FormSelect @bind-Value="Menu" DisplayName="Menu to select">					
					<option selected>Select one...</option>
					<option>One</option>
					<option>Two</option>
					<option>Three</option>
				</FormSelect>
			</FormFloating>
		</Run>
		<Code>
			@MD.Write(@"
```html

```
			")
		</Code>
	</Demo>
</Pager>
@code{
	[System.ComponentModel.DataAnnotations.Display(Name ="The name of user")]
	public string UserName { get; set; }
	public string Password { get; set; }
	public string Email { get; set; } = "email@example.com";
	public string Comments { get; set; }
	public string Menu { get; set; }
}